<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titl查询页面e</title>
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="../jquery-validation-1.9.0/jquery.validate.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<style>
    .a {
        border-bottom: 1px solid #D0D3D4;
    }

    #left {
        float: left;
        margin-top: 20px;
        margin-bottom: 5px;
    }

    #right {
        float: right;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .form-group input {
        width: 75%;
        display: inline-block;
    }

    .form-group input {
        margin-bottom: 10px;
    }
</style>
<body>
<div class="container">
    <div class="row a">
        <div id="left">
            <span class="glyphicon glyphicon-user glyphicon-white"></span>
            <c style="font-size: 15px">新增用户</c>
        </div>
        <div id="right">
            <button class="btn">隐藏</button>
            <button class="btn"><a href="newly.html" style="color: white">新增</a></button>
        </div>
    </div>
    <div class="row">
        <div action="" class="form-group" style="margin-top: 20px">
            <div class="col-md-2 col-sm-6 col-xs-12">
                <label for="account" class="control-label">账号:</label>
                <input type="text" id="account" class="form-control">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <label for="pwd" class="control-label">密码:</label>
                <input type="text" id="pwd" class="form-control">
            </div>
            <div class="col-md-2 col-sm-6 col-xs-12">
                <label for="sex" class="control-label">性别:</label>
                <select name="" id="sex" class="form-control" style="width: 75%;display: inline-block">
                    <option value=" "></option>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>

            <div class="col-md-4 col-sm-6 col-xs-12">
                <label for="hobby">爱好:</label>
                <select name="" id="hobby" class="form-control" style="width: 75%;display: inline-block">
                    <option value=" ">--请选择爱好--</option>
                    <option value="1">篮球</option>
                    <option value="2">NBA</option>
                    <option value="3">游戏</option>
                </select>
            </div>

            <div class="col-md-2  col-xs-12">
                <button class="btn btn-primary" id="search1" onclick="query1()">查询</button>
                <button class="btn btn-default" type="reset">重置</button>
            </div>
        </div>
    </div>
    <div style="width: 100%;overflow: auto;margin-top: 10px" class="text-center">
        <div style="min-width: 750px;">
            <table class="table table-bordered table-hover table-striped" id="table">
                <tr>
                    <td>公司</td>
                    <td>部门</td>
                    <td>账号</td>
                    <td>密码</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>爱好</td>
                    <td>学历</td>
                    <td>头像</td>
                </tr>

            </table>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "../json/user.json",
            type: "get",
            dataType: "json",
            data: "",
            success: function (data) {
                // alert(data)
                var html = '';
                $.each(data, function (a, b) {
                    var sex = b.sex == 1 ? "男" : "女";
                    //爱好
                    var arr = b.hobby;
                    var temp = "";
                    for (var i = 0; i < arr.length; i++) {
                        // console.log(arr[i])
                        if (arr[i] == 1) {
                            temp += "篮球"
                        } else if (arr[i] == 2) {
                            temp += "NBA"
                        } else if (arr[i] == 3) {
                            temp += "游戏"
                        }

                    }
                    //  学历
                    if (b.edu == 1) {
                        b.edu = "大专"
                    } else if (b.edu == 2) {
                        b.edu = "本科"
                    } else if (b.edu == 3) {
                        b.edu = "博士及以上"
                    }

                    html += '<tr>\n' +
                        '                <td>' + b.company + '</td>\n' +
                        '                <td>' + b.department + '</td>\n' +
                        '                <td>' + b.account + '</td>\n' +
                        '                <td>' + b.pwd + '</td>\n' +
                        '                <td>' + b.age + '</td>\n' +
                        '                <td>' + sex + '</td>\n' +
                        '                <td>' + temp + '</td>\n' +
                        '                <td>' + b.edu + '</td>\n' +
                        '                <td><img width="30px" src="' + b.head + '"></td>\n' +
                        '            </tr>'
                });
                $("#table").append(html);
            },
            error: function () {
                alert("数据连接失败！")
            }
        });
    });

    function query1() {
        $("#table").empty();
        var account = $("#account").val();
        var sex1 = $("#sex option:selected").val();
        // console.log($("#sex option:selected").val())
        var hobby = $("#hobby option:selected").val();
        // console.log(name)
        $.ajax({
            url: "../json/user.json",
            type: "get",
            dataType: "json",
            data: "",
            success: function (data) {
                var html = '';
                $.each(data, function (a, b) {
                    //账号查询
                    if (account == b.account) {
                        var sex = b.sex == 1 ? "男" : "女";
                        //爱好
                        var arr = b.hobby;
                        var temp = "";
                        for (var i = 0; i < arr.length; i++) {
                            // console.log(arr[i])
                            if (arr[i] == 1) {
                                temp += "篮球"
                            } else if (arr[i] == 2) {
                                temp += "NBA"
                            } else if (arr[i] == 3) {
                                temp += "游戏"
                            }

                        }
                        //  学历
                        if (b.edu == 1) {
                            b.edu = "大专"
                        } else if (b.edu == 2) {
                            b.edu = "本科"
                        } else if (b.edu == 3) {
                            b.edu = "博士及以上"
                        }
                        html = '<tr>\n' +
                            '                <td>' + b.company + '</td>\n' +
                            '                <td>' + b.department + '</td>\n' +
                            '                <td>' + b.account + '</td>\n' +
                            '                <td>' + b.pwd + '</td>\n' +
                            '                <td>' + b.age + '</td>\n' +
                            '                <td>' + sex + '</td>\n' +
                            '                <td>' + temp + '</td>\n' +
                            '                <td>' + b.edu + '</td>\n' +
                            '                <td><img width="30px" src="' + b.head + '"></td>\n' +
                            '            </tr>'
                        $("#table").append(html)
                    }
                    //性别
                    // var sex1 = $("#sex option:selected").val();
                    // console.log(sex1)
                    else if (sex1 == b.sex && hobby != null) {
                        var sex = b.sex == 1 ? "男" : "女";
//爱好
                        var arr = b.hobby;
                        var temp = "";
                        for (var i = 0; i < arr.length; i++) {
// console.log(arr[i])
                            if (arr[i] == 1) {
                                temp += "篮球"
                            } else if (arr[i] == 2) {
                                temp += "NBA"
                            } else if (arr[i] == 3) {
                                temp += "游戏"
                            }
                        }
//  学历
                        if (b.edu == 1) {
                            b.edu = "大专"
                        } else if (b.edu == 2) {
                            b.edu = "本科"
                        } else if (b.edu == 3) {
                            b.edu = "博士及以上"
                        }
                        html = '<tr>\n' +
                            '                <td>' + b.company + '</td>\n' +
                            '                <td>' + b.department + '</td>\n' +
                            '                <td>' + b.account + '</td>\n' +
                            '                <td>' + b.pwd + '</td>\n' +
                            '                <td>' + b.age + '</td>\n' +
                            '                <td>' + sex + '</td>\n' +
                            '                <td>' + temp + '</td>\n' +
                            '                <td>' + b.edu + '</td>\n' +
                            '                <td><img width="30px" src="' + b.head + '"></td>\n' +
                            '            </tr>';
                        $("#table").append(html)
                    } else if (hobby != null) {
                        var arr = b.hobby;
                        for (var j = 0; j < arr.length; j++) {
                            if (hobby == arr[j]) {
                                var sex = b.sex == 1 ? "男" : "女";
//爱好
                                var temp = "";
                                for (var i = 0; i < arr.length; i++) {
// console.log(arr[i])
                                    if (arr[i] == 1) {
                                        temp += "篮球"
                                    } else if (arr[i] == 2) {
                                        temp += "NBA"
                                    } else if (arr[i] == 3) {
                                        temp += "游戏"
                                    }

                                }
//  学历
                                if (b.edu == 1) {
                                    b.edu = "大专"
                                } else if (b.edu == 2) {
                                    b.edu = "本科"
                                } else if (b.edu == 3) {
                                    b.edu = "博士及以上"
                                }
                                html = '<tr>\n' +
                                    '                <td>' + b.company + '</td>\n' +
                                    '                <td>' + b.department + '</td>\n' +
                                    '                <td>' + b.account + '</td>\n' +
                                    '                <td>' + b.pwd + '</td>\n' +
                                    '                <td>' + b.age + '</td>\n' +
                                    '                <td>' + sex + '</td>\n' +
                                    '                <td>' + temp + '</td>\n' +
                                    '                <td>' + b.edu + '</td>\n' +
                                    '                <td><img width="30px" src="' + b.head + '"></td>\n' +
                                    '            </tr>'
                                $("#table").append(html)
                            }
                        }

                    } else {
                        return;
                    }
                });
            },
            error: function () {
                alert("数据连接失败")
            }

        });
    }

</script>